:global {
  .slide-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0.1s linear, height 0s ease 0.1s;
  }

  .shorter-slide {
    position: fixed !important;
    top: 40px !important;
    right: 0 !important;
    bottom: 0 !important;
    transition: all 0.2s !important;
    box-shadow: 0 10px 0 0 #ffff !important;
  }

  .open {
    opacity: 1;
  }

  .close {
    opacity: 0;
    pointer-events: none;
  }

  .slide-frame.animated {
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background: white;
    z-index: 999;

    .slide-title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 16px;
      font-size: 14px;
      position: relative;
      border-bottom: 1px solid #e9e9e9;
      color: #666;

      .close-icon {
        position: absolute;
        right: 15px;
        top: 17px;
        transition: transform 0.5s ease;
        cursor: pointer;
      }

      .close-icon:hover {
        transform: rotate(180deg) scale(1.2);
      }
    }

    .slide-content {
      padding: 16px 16px 0;
      height: calc(100% - 98px);
      overflow-y: scroll;
      overflow-x: hidden;

      &::after {
        content: '';
        display: block;
        padding-bottom: 40px;
      }

      .form-margin-right {
        margin-right: 150px;
      }

      .radio-btn-spacing {
        margin-left: 60px;
      }
    }

    .slide-content.no-footer {
      height: calc(100% - 50px);
    }

    transform: translate3d(100%, 0, 0);
    transition: all 0.5s;
  }

  .slide-frame.hide {
    display: none;
  }

  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }

  .slideInRight :local {
    transform: translate3d(0, 0, 0) !important;
  }

  .slideOutRight :local {
    transform: translate3d(100%, 0, 0) !important;
  }
}
